<template>
  <div class="panel">
    <tabs v-model="tabs"></tabs>
    <transition name="fade">
      <info v-if="tabs.includes(1)" transiton="fade"></info>
    </transition>
    <transition name="fade">
      <buttons transiton="fade" v-if="tabs.includes(2)" v-on="$listeners" v-bind="$attrs"></buttons>
    </transition>
    <transition name="fade">
      <warnings v-if="tabs.includes(3)" transiton="fade"></warnings>
    </transition>
  </div>
</template>

<script>
import tabs from "./tabs";
import info from "./info";
import buttons from "./buttons";
import warnings from "./warnings";
import { getSysRunTime } from "@/api/page/index.js";

export default {
  name: "panel",
  components: { tabs, info, buttons, warnings },
  props: {},
  data() {
    return {
      tabs: [1, 2, 3]
    };
  },
  watch: {},
  computed: {},
  methods: {
    async getData() {
      // let id = this.route.params.id;
      // if (!id) return;
      // this.loading = true;
      // this.list = await Api.OrderDetail.accessory({
      // 	data: {
      // 		correlationId
      // 	}
      // });
      // this.loading = false;
    },
    getSysRunTime() {
      getSysRunTime().then(response => {});
    }
  },
  created() {
    //this.getData()
  },
  mounted() {
    this.getSysRunTime();
  }
};
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";
.none-height {
	display: none;
}
@media screen and (min--moz-device-pixel-ratio: 0) {
  .ol-overlaycontainer {
    z-index: 1 !important;
  }
}
.panel {
  position: absolute;
  z-index: 90;
  top: 24px;
  left: 24px;
//   bottom: 24px;
  width: 339px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  > div {
    flex-shrink: 0;
    min-height: 0;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
}
</style>
